<template>
  <div class="index-container">
    <!-- 导航区域 -->
    <div class="nav">
      <ul>
        <li>
          <router-link to="/discovery">
            <span class="iconfont icon-find-music"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/playlists">
            <span class="iconfont icon-music-list"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/songs">
            <span class="iconfont icon-music"></span>
            最新音乐
          </router-link>
        </li>
        <li>
          <router-link to="/mvs">
            <span class="iconfont icon-mv"></span>
            最新MV
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 主题区域 -->
    <div class="main">
      <router-view></router-view>
    </div>
    <!-- 播放区域 -->
    <div class="player">
      <audio ref="player" :src="url" controls autoplay preload="true" @canplay="start" @ended="end"></audio>
    </div>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
// import playBar from './PlayBar'
export default {
  name: "index",
  components:{
    // playBar
  },
  data() {
    return {
      // http://m8.music.126.net/20201021210548/6a6d5638c5ea09d47ad480009f1d80dc/ymusic/78e7/1070/78e8/08e435a238de98cbdab01c6cd32f2743.mp3
      // url:"",
    };
  },
  computed:{
    ...mapGetters(['id','isPlay','url']),
  },
  watch:{
    isPlay:function(){
      this.togglePlay();
    }
  },
  methods:{
    // 获取连接后准备播放
    start(){
      // 开始播放
      let player=this.$refs.player
      player.play()
      this.$store.commit('setIsPlay',true)
    },
    // 播放结束
    end(){
       this.$store.commit('setIsPlay',false)
    },
    togglePlay(){
      // let player=document.querySelector('#player')
      if(this.isPlay){
        this.$refs.player.play()
      }else{
        this.$refs.player.pause()
      }
    },
  }
};
</script>

<style  scoped>
  .index-container .play-bar {
  background: #f1f3f4;
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.index-container .play-bar .kongjian{
  display: flex;
  height: 60px;
  align-items: center;
  justify-content:center;
}
 .index-container .play-bar .kongjian .playing-speed{
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-around;
 }

.index-container audio {
  width: 100%;
  border-radius: none;
  outline: none;
}
</style>
